<template>
  <el-dialog title="艺人信息" :visible.sync="visible" width="1100px" append-to-body :close-on-click-modal="false">
    <el-descriptions class="margin-top" :column="3" border :labelStyle="{ width: '120px' }"
      :contentStyle="{ minWidth: '222px' }">
      <el-descriptions-item>
        <template slot="label"> 姓名 </template>
        {{ name }}
      </el-descriptions-item>
      <el-descriptions-item :span="3">
        <template slot="label"> 照片 </template>
        <div class="text-center">
          <img width="320" :src="avatar" />
        </div>
      </el-descriptions-item>
      <el-descriptions-item v-for="(v, k) in artistInfo">
        <template slot="label">
          {{ infoKey[k] }}
        </template>
        {{ v }}
      </el-descriptions-item>
      <el-descriptions-item :span="4">
        <template slot="label"> 标签 </template>
        <el-tag style="display: inline-block; margin-bottom: 4px; margin-right: 4px" v-for="tag in labNames" :key="tag">
          {{ tag }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item :span="4">
        <template slot="label"> 所参与项目 </template>
        <el-tag style="display: inline-block; margin-bottom: 4px; margin-right: 4px" v-for="(p, index) in projects"
          :key="index" type="success">
          {{ p.projectName }}
        </el-tag>
      </el-descriptions-item>
    </el-descriptions>

  </el-dialog>
</template>

<script>
import { getFile } from '@/utils/ali-oss'
export default {
  props: {},
  mixins: [],
  components: {},
  data() {
    return {
      title: '',
      visible: false,
      name: '',
      avatar: '',
      labNames: [],
      projects: [],
      artistInfo: {

      },
      infoKey: {
        sex: '性别',
        birthday: '出生年月',
        school: '学校',
        major: '专业',
        famous: '民族',
        height: '身高',
        weight: '体重',
        hometown: '籍贯',
        dog: '是否单身',
        nickName: '昵称/外号',
        work: '职业',
        phone: '联系方式',
        address: '现居地',
        social: '社交平台账号',
        agent: '有/无经纪公司',
        mbti: 'MBTI'
      }
    }
  },
  computed: {
    // Your computed here
  },
  watch: {
    // Your watch here
  },
  methods: {
    async open(title, formData) {
      this.visible = true
      this.title = title
      const {
        name,
        avatar,
        sex,
        birthday,
        famous,
        height,
        weight,
        school,
        major,
        hometown,
        dog,
        nickName,
        work,
        phone,
        address,
        social,
        agent,
        mbti,
        labNames,
        projectInfoList
      } = formData
      this.name = name;
      const imgurl = await getFile(avatar)
      this.avatar = imgurl || require('@/assets/images/profile.jpg');
      this.labNames = labNames;
      this.projects = projectInfoList || []
      this.artistInfo = {
        sex,
        birthday,
        famous,
        height,
        weight,
        school,
        major,
        hometown,
        dog,
        nickName,
        work,
        phone,
        address,
        social,
        agent,
        mbti
      }
    }
  },
  created() {
    // console.log('Component created');
  },
  mounted() {
    // console.log('Component created');
  }
}
</script>

<style>
/* Your styles here */
.labelClass {
  width: 116px;
}
</style>
